<template>
  <div class="page-wrap cinema active fix-nav">
    <div class="swiper-header movie-ad"></div>
    <div class="tab-block">
      <div class="tab-content">
        <div class="page cinema" data-hot=".cinema">
          <div class="nav-wrap filter-nav-wrap">
            <div class="tab mb-line-b">
              <div
                :class="currrnt == index ? 'chosenTitle item' : 'item'"
                ref="chosenTitleArr"
                v-for="(chosenTitleList, index) in chosenTitleLists"
                :key="chosenTitleList.id"
                @click="chosenTitleHandler(index, chosenTitleList.id)"
              >
                {{ chosenTitleList.text }}<span class="drop"></span>
              </div>
            </div>
          </div>
          <div class="blacker"></div>
          <div
            class="cinema-list"
            style="postion: relative"
            data-cid="c_5ovvtlp2"
          >
            <div
              v-show="city_list_one_toggter"
              class="mint-popup area-box filter-box mint-popup-top"
              pop-transition="popup-fade"
              style="
                z-index: 2003;
                position: fixed;
                background-color: #fff;
                top: 3.9rem;
              "
            >
              <div class="filter-wrap">
                <ul class="district-list">
                  <li
                    data="district"
                    data-enter-time="1642831246"
                    data-click-fun="track_f_348058"
                  >
                    <div
                      :class="currrnt_two == -1 ? 'selected' : ''"
                      @click="fixedtitleHandler"
                    >
                      全城
                    </div>
                  </li>
                  <li
                    @click="currrnt_twoHandler(index, i)"
                    data="district"
                    v-for="(i, index) in districtName"
                    :key="i"
                  >
                    <div :class="currrnt_two == index ? 'selected' : ''">
                      {{ i }}
                    </div>
                  </li>
                </ul>
              </div>
            </div>
            <div class="list-wrap">
              <van-list
                v-model="loading"
                :finished="finished"
                finished-text="没有更多了"
                @load="onLoad"
                :immediate-check="false"
              >
                <template v-if="checkflag">
                  <router-link
                    :to="'/cinema/'+cinemaList.cinemaId+'/film'"
                    class="link item mb-line-b"
                    v-for="cinemaList in cinemaLists"
                    :key="cinemaList.cinemaId"
                  >
                    <div class="title-block box-flex middle">
                      <div class="title line-ellipsis">
                        <span>{{ cinemaList.name }}</span
                        ><span class="price-block"
                          ><span class="price">{{
                            cinemaList.lowPrice / 100
                          }}</span
                          ><span class="q">元起</span></span
                        >
                      </div>
                      <div class="location-block box-flex">
                        <div class="flex line-ellipsis">
                          {{ cinemaList.address }}
                        </div>
                        <div class="distance">
                          {{ cinemaList.Distance | DistanceFilter }}
                        </div>
                      </div>
                      <div class="flex"></div>
                      <div class="label-block">
                        <div class="snack">小吃</div>
                        <div class="vipTag">折扣卡</div>
                      </div>
                      <div class="discount-block">
                        <div>
                          <div class="discount-label normal card">
                            <img
                              src="https://i.maoyan.com/images/dpmmweb/cinemaList/img/base/base64/card.png"
                              alt=""
                            />
                          </div>
                          <div class="discount-label-text">
                            开卡特惠，10.9元起开卡
                          </div>
                        </div>
                      </div>
                    </div>
                  </router-link>
                </template>

                <template v-else>
                  <router-link
                    :to="'/cinema/'+cinemaList.cinemaId+'/film'"
                    class="link item mb-line-b"
                    v-for="cinemaList in districtList"
                    :key="cinemaList.cinemaId"
                  >
                    <div class="title-block box-flex middle">
                      <div class="title line-ellipsis">
                        <span>{{ cinemaList.name }}</span
                        ><span class="price-block"
                          ><span class="price">{{
                            cinemaList.lowPrice / 100
                          }}</span
                          ><span class="q">元起</span></span
                        >
                      </div>
                      <div class="location-block box-flex">
                        <div class="flex line-ellipsis">
                          {{ cinemaList.address }}
                        </div>
                        <div class="distance">
                          {{ cinemaList.Distance | DistanceFilter }}
                        </div>
                      </div>
                      <div class="flex"></div>
                      <div class="label-block">
                        <div class="snack">小吃</div>
                        <div class="vipTag">折扣卡</div>
                      </div>
                      <div class="discount-block">
                        <div>
                          <div class="discount-label normal card">
                            <img
                              src="https://i.maoyan.com/images/dpmmweb/cinemaList/img/base/base64/card.png"
                              alt=""
                            />
                          </div>
                          <div class="discount-label-text">
                            开卡特惠，10.9元起开卡
                          </div>
                        </div>
                      </div>
                    </div>
                  </router-link>
                </template>
              </van-list>
            </div>
            <div class="more"></div>
          </div>
        </div>
      </div>
    </div>
    <div class="locatebanner" data-bid="b_movie_0xqy7vj8_mc">
      <img
        class="locatebanner-arrow"
        src="https://sz2115api.zf-maple.cn/images/locate.png"
        alt=""
      /><span class="locatebanner-content">{{
        loacation || "正在获取定位..."
      }}</span>
      <div class="locatebanner-refresh-wrap" @click="this.getLoction">
        <img
          class="locatebanner-refresh"
          src="https://sz2115api.zf-maple.cn/images/refresh.png"
          alt=""
        />
      </div>
    </div>
  </div>
</template>
<script>
import http from "@/utils/htttp.js";
import { mapState, mapGetters } from "vuex";
import Vue from "vue";
import { List } from "vant";
import BaiduMap from "vue-baidu-map";

Vue.use(BaiduMap, {
  ak: "4iAFUNLYIc7bTGsGDc56Dw5LbKNRvxlB",
});
Vue.use(List);
export default {
  data() {
    return {
      city_list_one_toggter: false,
      chosenTitleLists: [
        { id: 1, text: "全城" },
        { id: 2, text: "品牌" },
        { id: 3, text: "特色" },
      ],
      checkflag: true,
      currrnt: -1,
      currrnt_two: -1,
      total: 0,
      loading: false,
      finished: false,
      pageNum: 1,
      cinemaLists: [],
      loacation: "",
      allcineamlist: [],
      districtList: [],
      defaultCityId: null,
      nextCityId:null
    };
  },
  filters: {
    DistanceFilter(distance) {
      //   return distance/4.2+'km'
      // console.log(distance);
    },
  },
  // activated(){
  //   if(this.nextCityId===this.$store.state.city.cityId) return
  //   console.log('ajax');
  //   this.nextCityId = this.$store.state.city.cityId
  //   // console.log(this.$store.state.city.cityId);
  // },
  async mounted() {
    console.log(this.cityId);
    let { name, detailName } = await this.getLocation();
    this.loacation = detailName;
    this.defaultCityId = await this.getCityid(name);
    let { total, allcineamlist } = await this.getallcinema(
      this.defaultCityId,
      this.cityId
    );
    this.total = total;
    this.allcineamlist = allcineamlist;
    let { total_two, cinemaLists } = await this.getRenderCinema(
      this.defaultCityId,
      this.cityId
    );
    this.total = total_two;
    this.cinemaLists = cinemaLists;
  },
  computed: {
    ...mapState("city", ["cityId"]),
    districtName() {
      return Array.from(
        new Set(this.allcineamlist.map((item) => item.districtName))
      );
    },
  },
  methods: {
    getRenderCinema(id, vuexId) {
      return new Promise((res, rej) => {
        http("/cinemalists", {
          params: {
            cityId: vuexId || id,
            ticketFlag: 1,
            pageNum: this.pageNum,
            pageSize: 10,
          },
        }).then((data) => {
          res({ total_two: data.data.total, cinemaLists: data.data.pageArr });
        });
      });
    },
    getLocation() {
      return new Promise((res, rej) => {
        new BMap.Geolocation().getCurrentPosition((position) => {
          http("/getlocation", {
            params: {
              x: position.point.lat,
              y: position.point.lng,
            },
          }).then((data) =>
            res({
              name: data.data.datas.addressComponent.city.substring(0, 2),
              detailName: data.data.datas.formatted_address,
            })
          );
        });
      });
    },

    getCityid(name) {
      return new Promise((res, rej) => {
        http("/getcitylists").then((data) => {
          res(data.data.cities.filter((city) => city.name == name)[0].cityId);
        });
      });
    },

    fixedtitleHandler() {
      this.checkflag = true;
      this.chosenTitleLists[0].text = "全城";
      this.currrnt_two = -1;
      this.city_list_one_toggter = false;
      this.$refs.chosenTitleArr[0].className = "item";
    },
    currrnt_twoHandler(index, areaname) {
      this.chosenTitleLists[0].text = areaname;
      this.checkflag = false;
      this.districtList = this.allcineamlist.filter(
        (item) => item.districtName == areaname
      );
      this.currrnt_two = index;
      this.city_list_one_toggter = false;
      this.$refs.chosenTitleArr[0].className = "item";
    },
    getallcinema(id, vuexId) {
      return new Promise((res, rej) => {
        http("/cinemalists", {
          params: {
            cityId: vuexId || id,
            ticketFlag: 1,
            pageNum: 1,
          },
        }).then((data) => {
          res({ total: data.data.total, allcineamlist: data.data.pageArr });
        });
      });
    },
    getLoction() {
      this.loacation = "";
      new BMap.Geolocation().getCurrentPosition((position, res) => {
        http("/getlocation", {
          params: {
            x: position.point.lat,
            y: position.point.lng,
          },
        }).then((res) => {
          setTimeout(() => {
            this.loacation = res.data.datas.formatted_address;
          }, 1000);
        });
      });
    },
    onLoad() {
      if (this.cinemaLists.length >= this.total) {
        this.finished = true;
        return;
      }
      this.pageNum++;
      http("/cinemalists", {
        params: {
          cityId: this.cityId || this.defaultCityId,
          ticketFlag: 1,
          pageNum: this.pageNum,
          pageSize: 10,
        },
      }).then((res) => {
        this.cinemaLists = [...this.cinemaLists, ...res.data.pageArr];
        this.loading = false;
      });
    },
    chosenTitleHandler(index, id) {
      this.currrnt = -1;
      this.$refs.chosenTitleArr[index]
        .getAttribute("class")
        .includes("chosenTitle")
        ? (this.$refs.chosenTitleArr[index].className = "item")
        : (this.$refs.chosenTitleArr[index].className = "item chosenTitle");
      if (id == 1) {
        this.city_list_one_toggter = !this.city_list_one_toggter;
      }
    },
  },
};
</script>
<style>
.cinema.fix-nav .nav-wrap {
  top: 3.1rem;
}
.mark {
  background: rgba(0, 0, 0, 0.6);
}
.cinema-list .mint-popup {
  z-index: 1901 !important;
  -webkit-transition: none;
  -o-transition: none;
  transition: none;
}

.cinema-list .v-modal {
  background: rgba(0, 0, 0, 0.6);
  z-index: 1900 !important;
}

.cinema-list .filter-box {
  top: 94px;
}

.cinema-list .filter-wrap {
  width: 100vw;
}

.cinema-list .district-list {
  list-style: none;
  padding: 10px 0 0 0;
  margin: 0 0 0 10px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  -ms-flex-line-pack: center;
  align-content: center;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}

.cinema-list .district-list li {
  font-size: 12px;
  display: inline-block;
  width: calc(25vw - 12.5px);
  padding-bottom: 15px;
  padding-right: 10px;
  height: 30px;
  -ms-flex-negative: 1;
  flex-shrink: 1;
}

.cinema-list .district-list li div {
  position: relative;
  color: #797d82;
  border-radius: 3px;
  text-align: center;
  height: 30px;
  line-height: 27px;
}

.cinema-list .district-list li div:after {
  content: " ";
  -webkit-transform: scale(0.5);
  -ms-transform: scale(0.5);
  transform: scale(0.5);
  position: absolute;
  border: 1px solid rgba(210, 214, 220, 0.5);
  top: -50%;
  right: -50%;
  bottom: -50%;
  left: -50%;
  border-radius: 4px;
}

.cinema-list .district-list li .selected {
  color: #ff5f16;
}

.cinema-list .district-list li .selected:after {
  content: " ";
  -webkit-transform: scale(0.5);
  -ms-transform: scale(0.5);
  transform: scale(0.5);
  position: absolute;
  border: 1px solid #ff5f16;
  top: -50%;
  right: -50%;
  bottom: -50%;
  left: -50%;
  border-radius: 4px;
}

.cinema-list .filter-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.cinema-list .filter-list li {
  height: 44px;
  width: 100vw;
  padding: 0 15px;
  position: relative;
  color: #797d82;
}

.cinema-list .filter-list li .filter-text {
  margin-left: 10px;
  font-size: 13px;
  letter-spacing: -0.2px;
  line-height: 44px;
}

.cinema-list .filter-list li .placehold {
  display: inline-block;
  width: 13px;
}

.cinema-list .filter-list li:after {
  content: " ";
  position: absolute;
  left: 0;
  bottom: 0;
  right: 0;
  height: 1px;
  border-bottom: 1px solid #ededed;
  color: #ededed;
  -webkit-transform-origin: 0 100%;
  -ms-transform-origin: 0 100%;
  transform-origin: 0 100%;
  -webkit-transform: scaleY(0.5);
  -ms-transform: scaleY(0.5);
  transform: scaleY(0.5);
}

.cinema-list .filter-list .selected {
  color: #ff5f16;
}

.cinema-list .cinema-layer {
  padding-top: 94px;
}

.cinema-list .cinema-list-wrap {
  padding-bottom: 49px;
  z-index: 100;
}

.cinema-list .cinema-list-wrap ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.cinema-list .cinema-list-wrap li {
  position: relative;
  background-color: #fff;
  padding: 15px;
}

.cinema-list .cinema-list-wrap li:after {
  content: " ";
  position: absolute;
  left: 0;
  bottom: 0;
  right: 0;
  height: 1px;
  border-bottom: 1px solid #ededed;
  color: #ededed;
  -webkit-transform-origin: 0 100%;
  -ms-transform-origin: 0 100%;
  transform-origin: 0 100%;
  -webkit-transform: scaleY(0.5);
  -ms-transform: scaleY(0.5);
  transform: scaleY(0.5);
}

.cinema-list .cinema-list-wrap li .cinema-item-wrap {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.cinema-list .cinema-list-wrap li .cinema-item-wrap .cinema-info-lf {
  width: calc(100% - 65px);
  text-align: left;
  padding-right: 15px;
  float: left;
}

.cinema-list .cinema-list-wrap li .cinema-item-wrap .cinema-info-lf span {
  display: block;
  max-width: 80%;
  overflow: hidden;
  -o-text-overflow: ellipsis;
  text-overflow: ellipsis;
  white-space: nowrap;
  float: left;
}

.cinema-list
  .cinema-list-wrap
  li
  .cinema-item-wrap
  .cinema-info-lf
  .cinema-name {
  color: #191a1b;
  font-size: 15px;
  float: left;
}

.cinema-list .cinema-list-wrap li .cinema-item-wrap .cinema-info-lf .isVisted {
  width: 32px;
  height: 16.5px;
  margin-bottom: -6px;
  margin-left: 4px;
}

.cinema-list
  .cinema-list-wrap
  li
  .cinema-item-wrap
  .cinema-info-lf
  .ticketType {
  line-height: 15px;
  width: 240px;
  overflow: hidden;
  -o-text-overflow: ellipsis;
  text-overflow: ellipsis;
  white-space: nowrap;
  height: 15px;
  margin-top: 5px;
  font-size: 12px;
  letter-spacing: -0.1px;
  color: #797d82;
  margin-right: 5px;
}

.cinema-list
  .cinema-list-wrap
  li
  .cinema-item-wrap
  .cinema-info-lf
  .ticketType
  p {
  float: left;
}

.cinema-list
  .cinema-list-wrap
  li
  .cinema-item-wrap
  .cinema-info-lf
  .cinema-address {
  color: #797d82;
  font-size: 12px;
  margin-top: 5px;
}

.cinema-list .cinema-list-wrap li .cinema-item-wrap .cinema-info-rt {
  width: 70px;
  text-align: center;
  float: right;
  margin-right: -5px;
}

.cinema-list
  .cinema-list-wrap
  li
  .cinema-item-wrap
  .cinema-info-rt
  .cinema-gpsAddress {
  display: block;
  font-size: 11px;
  color: #797d82;
  margin-top: 5px;
}

.cinema-list
  .cinema-list-wrap
  li
  .cinema-item-wrap
  .cinema-info-rt
  .cinema-gpsAddress
  img {
  display: block;
  width: 13px;
  height: 17.5px;
  margin: 0 auto;
  margin-top: -30px;
}

.cinema-list
  .cinema-list-wrap
  li
  .cinema-item-wrap
  .cinema-info-rt
  .cinema-gpsAddress
  strong {
  font-weight: 400;
  display: block;
  margin-top: 5px;
}

.cinema-list .cinema-list-wrap li .cinema-item-wrap .cinema-info-rt .upon {
  color: #ff5f16;
  font-size: 10px;
}

.cinema-list .cinema-list-wrap li .cinema-item-wrap .cinema-info-rt .hidePrice {
  visibility: hidden;
}

.cinema-list .cinema-list-tag {
  position: fixed;
  height: 50px;
  width: 100%;
  top: 44px;
  right: 0;
  text-align: center;
  background-color: #fff;
  z-index: 2000;
}

.cinema-list .cinema-list-tag:after {
  content: " ";
  position: absolute;
  left: 0;
  bottom: 0;
  right: 0;
  height: 1px;
  border-bottom: 1px solid #ededed;
  color: #ededed;
  -webkit-transform-origin: 0 100%;
  -ms-transform-origin: 0 100%;
  transform-origin: 0 100%;
  -webkit-transform: scaleY(0.5);
  -ms-transform: scaleY(0.5);
  transform: scaleY(0.5);
}

.cinema-list .cinema-list-tag .cinema-list-tag-line {
  position: absolute;
  bottom: -4px;
  width: 100%;
  z-index: 10;
}

.cinema-list .cinema-list-tag .cinema-list-tag-line div {
  float: left;
  width: 50%;
}

.cinema-list .cinema-list-tag .cinema-list-tag-line label {
  display: inline-block;
  width: 50px;
}

.cinema-list .cinema-list-tag .cinema-list-tag-line label.selected {
  border: 1px solid #c03131;
  background-color: #c03131;
  border-radius: 2px;
}

.cinema-list .cinema-list-tag .cinema-list-tag-name {
  position: relative;
}

.cinema-list .cinema-list-tag .cinema-list-tag-name label {
  float: left;
  width: 33.3%;
  line-height: 49px;
  font-size: 14px;
  color: #191a1b;
  letter-spacing: -0.2px;
}

.cinema-list .cinema-list-tag .cinema-list-tag-name label i {
  margin-left: 6px;
}

.cinema-list .cinema-list-tag .cinema-list-tag-name .selected {
  color: #ff5f16;
}

.cinema-list .cinema-list-tag .cinema-list-tag-name img {
  vertical-align: middle;
  padding-left: 2px;
}

.cinema-list .fix-cinema-list {
  position: absolute;
  bottom: 49px;
  padding: 0;
  height: calc(100vh - 343px);
  overflow-y: auto;
}
</style>